<template>
  <div class="home">
    <el-container>
      <el-aside
        v-bind:style="{ width: widthdata }"
        :class="inAnimation ? 'Anim' : 'Ani'"
        ref="listGroup"
      >
        <!-- 导航栏 -->
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="true">展开</el-radio-button>
          <el-radio-button :label="false">收起</el-radio-button>
        </el-radio-group> -->

        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          text-color="#4e5bf8"
          ref="sideMenu"
          active-text-color="#E47833"
          :show-timeout="600"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          :collapse-transition="false"
          :class="inAnimation ? 'Anim' : 'Ani'"
        >
          <qf-sub-menu :sideMenu="menuList"></qf-sub-menu>
        </el-menu>

        <!-- 导航栏结尾 -->
      </el-aside>

      <el-container>
        <el-header>
          <!-- header区域 -->
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span @click="Collapse" :class="[iconfont, icon]"></span></div
            ></el-col>
            <!-- header的中间部分 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                原生公司后台管理系统
              </div></el-col
            >
            <el-col :span="6" class="aa"
              ><div class="grid-content bg-purple">
                <el-avatar
                  :size="40"
                  fit="fit"
                  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605702459701&di=bbb3dcaf0bb462e73fb9e46e016b16cb&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png"
                  class="aa"
                ></el-avatar>
                <span>欢迎您:</span>
                <b class="nickname">{{ userInfo.nickname }}</b>
                <span class="quit" @click="quit">退出</span>
              </div></el-col
            >
          </el-row>
          <!-- header结尾 -->
        </el-header>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Welcome' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in crumbs"
              :to="{ path: item.path }"
              :key="index"
              >{{ item.meta.name }}</el-breadcrumb-item
            >

            <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
@import "../../assets/styles/Home.css";
@import "../../assets/iconFonts/iconfont.css";
</style>

<script>
import { getLoginLog } from "@/api";
import submenu from "../../components/subMenu";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo", "menuList", "crumbs"])
  },
  components: {
    submenu
  },
  data() {
    return {
      widthdata: "200px",
      isCollapse: false,
      iconfont: "iconfont",
      icon: "icon-zhankai",
      inAnimation: true
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    quit() {
      //退出登录
      // 清楚token  和 userinfo
      //跳转登录页面
      localStorage.removeItem("Lorenzo");
      localStorage.removeItem("Lorenzo-userInfo");
      this.$router.push("/login");
      window.location.reload();
    },
    Collapse() {
      if (!this.isCollapse) {
        this.inAnimation = false;
        this.widthdata = "65px";
        this.icon = "icon-shouqi";
      } else {
        this.inAnimation = true;
        this.widthdata = "200px";
        this.icon = "icon-zhankai";
      }

      // console.log(this.$refs.listGroup)
      this.isCollapse = !this.isCollapse;
    }
  },
  mounted() {
    getLoginLog().then(res => {
      console.log(res);
    });
  }
};
</script>
